<template>
  <div class="index-base-info">
    <el-form ref="baseInfoForm" :label-position="'top'" :rules="rules" :model="baseInfo" size="small" class="form_box">
      <el-form-item prop="name" :label="infoType === 'model' ? '指标模型名称' : '指标名称'">
        <el-input
          v-model="baseInfo.name"
          :placeholder="infoType === 'model' ? '请输入指标模型名称' : '请输入指标名称'"
          :disabled="pageType === 'view'"></el-input>
      </el-form-item>
      <el-form-item prop="aliasName" :label="infoType === 'model' ? '指标模型简称' : '指标简称'">
        <el-input
          v-model="baseInfo.aliasName"
          :placeholder="infoType === 'model' ? '请输入指标模型简称' : '请输入指标简称'"
          :disabled="pageType === 'view'"></el-input>
      </el-form-item>
      <el-form-item prop="desc" :label="infoType === 'model' ? '模型描述' : '指标描述'">
        <el-input v-model="baseInfo.desc" :placeholder="infoType === 'model' ? '请输入模型描述' : '请输入指标描述'" :disabled="pageType === 'view'"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'IndexBaseInfo',
  props: {
    // 信息类型，model-模型信息，index-指标信息
    infoType: {
      type: String,
      default: 'model',
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    info: {
      handler(obj) {
        if (obj && obj.id) {
          if (this.infoType === 'model') {
            this.baseInfo = {
              name: obj.modelName,
              aliasName: obj.modelAlias,
              desc: obj.modelDescribe,
            }
          } else {
            this.baseInfo = {
              name: obj.targetName,
              aliasName: obj.targetAlias,
              desc: obj.targetDescribe,
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    pageType() {
      return this.$route.query.type || 'add'
    },
  },
  data() {
    return {
      baseInfo: {
        name: '', // 名称
        aliasName: '', // 简称
        desc: '', // 描述
      },
      rules: {
        name: [{ required: true, message: this.infoType === 'model' ? '请输入指标模型名称' : '请输入指标名称', trigger: 'blur' }],
        aliasName: [{ required: true, message: this.infoType === 'model' ? '请输入指标模型简称' : '请输入指标简称', trigger: 'blur' }],
      },
    }
  },
}
</script>
